{% extends 'base.html' %}
{% block main %}
<nav class="navbar navbar-default" role="navigation">
						<div class="navbar-header">
							 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-thumbs-up"></span>&nbsp;评论专区</a>
						</div>

					</nav>

					<table style="text-align: center;" class="table">
						<tbody>
							<tr  style="border-bottom: 2px wheat solid">
								<td>
                                    <b>客官</b>
								</td>
								<td colspan="2">
                                    <b>评论内容</b>
								</td>
							</tr>
                            {% for foo in comment %}
                            <tr>
								<td style="vertical-align:middle; border-bottom: 2px wheat solid;" rowspan="3">
                                    {{ foo.user.username }}<br><br>
                                    <span style="font-size: 10px">下单时间:<br>{{ foo.order_1.order_data }}</span>
								</td>
								<td style="word-break: break-all; word-wrap:break-word;" colspan="2">
                                    {{ foo.comment }}
								</td>
							</tr>
                            <tr>
								<td>
                                    {% if foo.photo %}
                                        <img src="{{ foo.photo.url }}" width="40%">
                                    {% endif %}
								</td>
							</tr>
                            <tr style="border-bottom: 2px wheat solid">
								<td>
                                    <b>星级:&nbsp;</b>
                                    {% if foo.lv == 1 %}
									    <span class="glyphicon glyphicon-star">&emsp;非常差</span>
                                    {% elif foo.lv == 2 %}
                                        <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">&emsp;差</span>
                                    {% elif foo.lv == 3 %}
                                        <span class="glyphicon glyphicon-star"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span>&emsp;一般</span>
                                    {% elif foo.lv == 4 %}
                                        <span class="glyphicon glyphicon-star"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span>&emsp;满意</span>
                                    {% else %}
                                        <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">&emsp;非常满意</span>
									{% endif %}

								</td>
							</tr>
                        {% endfor %}
						</tbody>
					</table>
                    <ul class="pagination pull-right">
                        {% if comment.has_previous %}
                            <li><a href="/order/comment/?page={{ comment.previous_page_number }}">上一页</a></li>
                        {% else %}
                            <li><a href="">上一页</a></li>
                        {% endif %}
                        {% for i in comment.paginator.page_range %}
                            {#判断是否为当前页,如果是当前页则普通展示并加粗#}
                            {% if i == comment.number %}
                                <li class="active"><a href="#">{{ i }}</a></li>
                            {#如果不是当前页则附带超链接展示#}
                            {% else %}
                            {#超链接用于点击某一页页码时候将页码传到后台#}
                                <li><a href="/order/comment/?page={{ i }}">{{ i }}</a></li>
                            {% endif %}
                        {% endfor %}
                        {% if comment.has_next %}
                            <li><a href="/order/comment/?page={{ comment.next_page_number }}">下一页</a></li>
                        {% else %}
                            <li><a href="">下一页</a></li>
                        {% endif %}
			</ul>

{% endblock main %}